<template>
    <el-dialog
        :title="noticeRowData.sendType == '3' || noticeRowData.sendType == '1' ? '教师列表' : '学生列表'"
        :visible.sync="readVisible"
        width="1100px"
        custom-class="readStatusDlg"
        >
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="已读" name="read">
                <el-table
                    :data="readTableData"
                    ref="multipleTable"
                    style="width: 100%"
                    height="320"
                    >
                    <el-table-column
                        type="index"
                        label="序号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableColumn"
                        :key="item.prop"
                        :prop="item.prop"
                        :label="item.label"
                        :show-overflow-tooltip="true"
                        :align="'center'"
                    >
                    </el-table-column>
                </el-table>
                <pagination
                    v-show="readTotal > 0"
                    :total="readTotal"
                    :page.sync="readParams.pageNum"
                    :limit.sync="readParams.pageSize"
                    @pagination="getReadList"
                    />
            </el-tab-pane>
            <el-tab-pane label="未读" name="noread">
                <el-table
                    :data="noreadTableData"
                    style="width: 100%"
                    height="320"
                    >
                    <el-table-column
                        type="index"
                        label="序号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        v-for="item in tableColumn"
                        :key="item.prop"
                        :prop="item.prop"
                        :label="item.label"
                        :show-overflow-tooltip="true"
                        :align="'center'"
                    ></el-table-column>
                </el-table>
                <pagination
                    v-show="noreadTotal > 0"
                    :total="noreadTotal"
                    :page.sync="noreadParams.pageNum"
                    :limit.sync="noreadParams.pageSize"
                    @pagination="getNoreadList"
                    />
            </el-tab-pane>
        </el-tabs>
    </el-dialog>
</template>

<script>

import { 
  getReadList
} from "@/api/system/notice";
export default {
    name: 'selectUser',
    components: { 
        
    },
    props:{

    },
    data () {
        return {
            readVisible: false,
            activeName: 'read',
            tableColumn:[{
                label:'姓名',
                prop:'userName'
            }],
            readTableData: [],
            noreadTableData: [],
            noticeRowData:{},
            readTotal:0,
            readParams:{
                pageNum: 1,
                pageSize: 10
            },
            noreadTotal:0,
            noreadParams:{
                pageNum: 1,
                pageSize: 10
            }
        }
    },
    created() {

    },
    methods: {
        open (rowdata) {
            this.readVisible = true
            this.noticeRowData = rowdata
            this.getList()
        },
        handleClick (e) {
        },
        getReadList(){
            // 获取已读人员
            getReadList({
                noticeId: this.noticeRowData.noticeId,
                readStatus: '1',
                pageNum: this.readParams.pageNum,
                pageSize: this.readParams.pageSize
            }).then((res) => {
                console.log(res)
                this.readTableData = res.rows
                this.readTotal = res.total
            })
        },
        getNoreadList(){
            // 获取未读人员
            getReadList({
                noticeId: this.noticeRowData.noticeId,
                readStatus: '0',
                pageNum: this.noreadParams.pageNum,
                pageSize: this.noreadParams.pageSize
            }).then((res) => {
                console.log(res)
                this.noreadTableData = res.rows
                this.noreadTotal = res.total
            })
        },
        getList () {
            this.getReadList()
            this.getNoreadList()
        }
    }
}
</script>

<style lang="scss" scoped>
    .selectUserContent{
        ::v-deep .el-drawer__header{
            margin-bottom: 5px;
        }
        ::v-deep .el-badge__content.is-fixed {
            position: absolute;
            top: 15px;
            right: 3px;
        }
    }
    ::v-deep .readStatusDlg{
        ::v-deep .el-dialog__body{
            padding-top: 10px;
        }
        ::v-deep .pagination-container{
            height: 33px;
        }
    }
</style>

<style lang="scss">
    .readStatusDlg{
        .el-dialog__body{
            padding-top: 10px;
        }
        .pagination-container{
            height: 33px;
        }
    }
</style>